import { add_class, remove_class } from '../../../element/class_operate/Func';
import { normalizeContainer } from '../../../element/Func';
import { packNode } from '../../../element/Func/packNode';
import { element_attri_disableAniamtion } from '../DataDefine/sourceData';
import { getNum } from './getNum';
import { seekElement_attribute } from './getTargetEl';
import { settimeNth } from './setNthTime';

const disnone_calc_id = 'disnone_calc';

/**
 * 用于计算 时间的 隐藏元素
 * @type {HTMLElement}
 */
let disnone_calc_El;

/**
 * 展示 元素 -- 兩層 setTimeout
 * --目標元素 延迟添加 和 class animation 和 延遲删除
 * @param {HTMLElement} el	--目標元素
 * @param {String} animate	-- 動畫class
 * @param {Number} [delay = 0]	-- 延遲添加 ms
 * @param {Number | "no" | false | "false"} [lateDrop=false]	默认 删除 -- 延遲刪除 ms (number ||  ['no', 'false', false] (不删除))
 *
 * @return {Number} --延迟添加 和 animation 的時間 和 延遲删除 所用的時間
 */
function endsTimeAnimation(
  el,
  animate,
  delay = 0,
  lateDrop = false,
  hasCssVar = false
) {
  //   let classConditionArr = ['disnone'];
  if (!(el instanceof HTMLElement) || animate == undefined) {
    return 0;
  }
  if (getAnimaLocalStatus(el) == true) {
    // if (classConditionArr.indexOf(animate) > -1) {
    //   removeClass(el, animate);
    // }
    remove_class(el, animate);
    // console.log('you got me false condition');
    return 0;
  }
  /**
   * 返回結果
   */
  let delayResult = 0;

  if (['no', 'false', false].indexOf(lateDrop) > -1) {
    lateDrop = false;
  } else {
    lateDrop = getNum(lateDrop);
  }

  //   console.log(['no', 'false', false].indexOf(lateDrop), lateDrop);
  create_DisnoneEl_forCalculate_totalTime(el, hasCssVar, animate);
  let computedStyle = window.getComputedStyle(disnone_calc_El);
  let classDelay = eval(
    parseFloat(computedStyle.animationDuration.slice(0, -1)) +
      parseFloat(computedStyle.animationDelay.slice(0, -1))
  );
  //   console.log(classDelay);
  //移除 模拟计算的 class
  remove_class(disnone_calc_El, animate);

  delayResult = Number(delay) + Number(classDelay * 1000);
  if (lateDrop != false && lateDrop > 0) {
    delayResult += Number(lateDrop);
  }

  if (hasCssVar) {
    // 放置到 同源下 保证 css var 运行环境
    disnone_calc_El.remove();
    window.calcdomAnimateDelayEl = undefined;
  }

  // setTimeout(() => {
  //   // console.log(el);
  //   // el.classList.add(animate);
  //   removeClass(el, animate, true);

  //   let comedEl = window.getComputedStyle(el);
  //   // console.log(comedEl);

  //   //目标 class 延迟时间
  //   let totalDelay = eval(
  //     parseFloat(comedEl.animationDuration.slice(0, -1)) +
  //       parseFloat(comedEl.animationDelay.slice(0, -1))
  //   );
  //   // console.log(totalDelay);
  //   if (toStringTypeCheck(lateDrop, 'number')) {
  //     setTimeout(() => {
  //       // el.classList.remove(animate);
  //       removeClass(el, animate);
  //     }, Number(delay) + Number(totalDelay * 1000) + Number(lateDrop));
  //   }
  // }, delay);

  settimeNth(delay, () => {
    add_class(el, animate);
  });
  settimeNth(delayResult, () => {
    remove_class(el, animate);
  });
  return delayResult;
}

/**
 * 创建 一个 隐藏元素 为了 计算 相关的 动画时间
 */
function create_DisnoneEl_forCalculate_totalTime(el, hasCssVar, animate) {
  if (window.calcdomAnimateDelayEl == undefined) {
    disnone_calc_El = document.createElement('div');
    disnone_calc_El.id = disnone_calc_id;
    add_class(disnone_calc_El, 'disnone');
    add_class(disnone_calc_El, 'EndsTimeDIV');
    if (hasCssVar) {
      // 放置到 同源下 保证 css var 运行环境
      el.appendChild(disnone_calc_El);
    } else {
      packNode(document.body, disnone_calc_El, true, normalizeContainer('app'));
    }

    window.calcdomAnimateDelayEl = disnone_calc_El;
  }
  add_class(disnone_calc_El, animate);
}

/**
 * 检测 当前 元素 或 祖籍 元素 是否 设置 警用 自定义动画 效果
 * @param {HTMLElement} curEl 当前 元素
 * @returns {boolean}
 */
function getAnimaLocalStatus(curEl) {
  let ancesEl = seekElement_attribute(curEl, element_attri_disableAniamtion);
  return ancesEl?.getAttribute(element_attri_disableAniamtion) == true;
}
export { endsTimeAnimation };
